<template>
  <view class="recruit-apply">

    
    <!-- 岗位信息 -->
    <view v-if="recruitInfo" class="recruit-apply__recruit">
      <view class="recruit-apply__recruit-title">{{ recruitInfo.title }}</view>
      <view class="recruit-apply__recruit-org">{{ recruitInfo.organization }}</view>
    </view>
    
    <!-- 申请表单 -->
    <view class="recruit-apply__form">
      <view class="recruit-apply__form-title">个人简历</view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">姓名</text>
        <input class="recruit-apply__form-input" type="text" v-model="resumeForm.name" placeholder="请输入姓名" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">性别</text>
        <view class="recruit-apply__form-radio">
          <view 
            class="recruit-apply__form-radio-item" 
            :class="{ 'recruit-apply__form-radio-item--active': resumeForm.gender === '男' }"
            @click="resumeForm.gender = '男'"
          >
            <text class="recruit-apply__form-radio-dot"></text>
            <text class="recruit-apply__form-radio-text">男</text>
          </view>
          <view 
            class="recruit-apply__form-radio-item" 
            :class="{ 'recruit-apply__form-radio-item--active': resumeForm.gender === '女' }"
            @click="resumeForm.gender = '女'"
          >
            <text class="recruit-apply__form-radio-dot"></text>
            <text class="recruit-apply__form-radio-text">女</text>
          </view>
        </view>
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">手机号码</text>
        <input class="recruit-apply__form-input" type="number" v-model="resumeForm.phone" placeholder="请输入手机号码" maxlength="11" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">邮箱</text>
        <input class="recruit-apply__form-input" type="text" v-model="resumeForm.email" placeholder="请输入邮箱" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">学校</text>
        <input class="recruit-apply__form-input" type="text" v-model="resumeForm.school" placeholder="请输入学校" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">专业</text>
        <input class="recruit-apply__form-input" type="text" v-model="resumeForm.major" placeholder="请输入专业" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">年级</text>
        <picker class="recruit-apply__form-picker" mode="selector" :range="gradeOptions" @change="handleGradeChange">
          <view class="recruit-apply__form-picker-text">
            {{ resumeForm.grade || '请选择年级' }}
          </view>
        </picker>
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">技能特长</text>
        <textarea class="recruit-apply__form-textarea" v-model="resumeForm.skills" placeholder="请输入你的技能特长，如编程、设计、沟通能力等" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">相关经历</text>
        <textarea class="recruit-apply__form-textarea" v-model="resumeForm.experience" placeholder="请输入相关经历，如参与过的项目、活动等" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">获奖情况</text>
        <textarea class="recruit-apply__form-textarea" v-model="resumeForm.awards" placeholder="请输入获奖情况，如校级比赛、奖学金等" />
      </view>
      
      <view class="recruit-apply__form-item">
        <text class="recruit-apply__form-label">自我介绍</text>
        <textarea class="recruit-apply__form-textarea" v-model="resumeForm.selfIntroduction" placeholder="请简要介绍自己，包括性格特点、兴趣爱好、未来规划等" />
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="recruit-apply__footer">
      <button class="recruit-apply__submit" @click="handleSubmit" :disabled="submitting">
        {{ submitting ? '提交中...' : '提交申请' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { userInfo } from '@/mock/user';

// 初始化store
const store = useStore();

// 获取页面参数
const recruitId = ref(null);

// 计算属性：详情加载状态
const loading = computed(() => store.getters['recruit/detailLoading']);

// 计算属性：提交状态
const submitting = computed(() => store.getters['recruit/submitting']);

// 计算属性：招聘岗位详情
const recruitInfo = computed(() => store.getters['recruit/getRecruitDetail']);

// 年级选项
const gradeOptions = ['大一', '大二', '大三', '大四', '研一', '研二', '研三', '博士'];

// 简历表单
const resumeForm = reactive({
  name: userInfo.name || '',
  gender: userInfo.gender === 1 ? '男' : '女',
  phone: userInfo.phone || '',
  email: userInfo.email || '',
  school: userInfo.school || '',
  major: userInfo.major || '',
  grade: userInfo.grade || '',
  skills: '',
  experience: '',
  awards: '',
  selfIntroduction: userInfo.bio || ''
});

// 页面加载
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  
  if (options.id) {
    recruitId.value = parseInt(options.id);
    store.dispatch('recruit/fetchRecruitDetail', recruitId.value);
  } else {
    uni.showToast({
      title: '参数错误',
      icon: 'none'
    });
    setTimeout(() => {
      goBack();
    }, 1500);
  }
});

// 处理年级选择
const handleGradeChange = (e) => {
  const index = e.detail.value;
  resumeForm.grade = gradeOptions[index];
};

// 表单验证
const validateForm = () => {
  if (!resumeForm.name) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    });
    return false;
  }
  
  if (!resumeForm.phone) {
    uni.showToast({
      title: '请输入手机号码',
      icon: 'none'
    });
    return false;
  }
  
  if (!/^1\d{10}$/.test(resumeForm.phone)) {
    uni.showToast({
      title: '手机号码格式不正确',
      icon: 'none'
    });
    return false;
  }
  
  if (!resumeForm.email) {
    uni.showToast({
      title: '请输入邮箱',
      icon: 'none'
    });
    return false;
  }
  
  if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(resumeForm.email)) {
    uni.showToast({
      title: '邮箱格式不正确',
      icon: 'none'
    });
    return false;
  }
  
  if (!resumeForm.school) {
    uni.showToast({
      title: '请输入学校',
      icon: 'none'
    });
    return false;
  }
  
  if (!resumeForm.major) {
    uni.showToast({
      title: '请输入专业',
      icon: 'none'
    });
    return false;
  }
  
  if (!resumeForm.grade) {
    uni.showToast({
      title: '请选择年级',
      icon: 'none'
    });
    return false;
  }
  
  if (!resumeForm.selfIntroduction) {
    uni.showToast({
      title: '请输入自我介绍',
      icon: 'none'
    });
    return false;
  }
  
  return true;
};

// 提交申请
const handleSubmit = async () => {
  // 验证表单
  const validateResult = validateForm();
  if (!validateResult) {
    return;
  }
  
  if (!recruitId.value) {
    uni.showToast({
      title: '参数错误',
      icon: 'none'
    });
    return;
  }
  
  try {
    // 构建提交数据
    const data = {
      recruitId: recruitId.value,
      resume: resumeForm
    };
    
    // 使用Vuex action提交申请
    const result = await store.dispatch('recruit/submitApplication', data);
    
    if (result.success) {
      uni.showToast({
        title: result.message || '申请成功',
        icon: 'success'
      });
      
      // 跳转到申请记录页面
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/recruit/applications'
        });
      }, 1500);
    } else {
      uni.showToast({
        title: result.message || '申请失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('提交申请失败', error);
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none'
    });
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.recruit-apply {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 80px;
  

  
  &__recruit {
    margin-top: 16px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    margin-left: 16px;
    margin-right: 16px;
    
    &-title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    
    &-org {
      font-size: 15px;
      color: #666;
      background-color: #f5f7fa;
      display: inline-block;
      padding: 3px 10px;
      border-radius: 10px;
    }
  }
  
  &__form {
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    margin-left: 16px;
    margin-right: 16px;
    
    &-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px dashed #f0f0f0;
      position: relative;
      padding-left: 14px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 20px;
        background: linear-gradient(to bottom, #1890ff, #36a6ff);
        border-radius: 3px;
      }
    }
    
    &-item {
      margin-bottom: 20px;
    }
    
    &-label {
      display: block;
      font-size: 15px;
      color: #333;
      margin-bottom: 10px;
      font-weight: 500;
    }
    
    &-input {
      width: 100%;
      height: 44px;
      background-color: #f5f7fa;
      border-radius: 12px;
      padding: 0 16px;
      font-size: 15px;
      color: #333;
      transition: all 0.3s;
      
      &:focus {
        background-color: #e8f4ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
      }
    }
    
    &-radio {
      display: flex;
      
      &-item {
        display: flex;
        align-items: center;
        margin-right: 32px;
        padding: 6px 10px;
        border-radius: 30px;
        transition: all 0.3s;
        
        &:active {
          background-color: #f5f7fa;
        }
        
        &--active {
          .recruit-apply__form-radio-dot {
            background-color: #1890ff;
            border-color: #1890ff;
            box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.1);
            
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: #ffffff;
            }
          }
        }
      }
      
      &-dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #d9d9d9;
        margin-right: 8px;
        position: relative;
        transition: all 0.2s;
      }
      
      &-text {
        font-size: 15px;
        color: #333;
      }
    }
    
    &-picker {
      width: 100%;
      height: 44px;
      background-color: #f5f7fa;
      border-radius: 12px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      position: relative;
      
      &::after {
        content: '\e6e1'; /* 下拉箭头图标编码 */
        font-family: 'iconfont';
        position: absolute;
        right: 16px;
        font-size: 16px;
        color: #999;
      }
      
      &-text {
        font-size: 15px;
        color: #333;
      }
    }
    
    &-textarea {
      width: 100%;
      height: 120px;
      background-color: #f5f7fa;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 15px;
      color: #333;
      line-height: 1.6;
      transition: all 0.3s;
      
      &:focus {
        background-color: #e8f4ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
      }
    }
  }
  
  &__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 20px;
    background-color: #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  
  &__submit {
    width: 100%;
    height: 48px;
    background: linear-gradient(90deg, #1890ff, #36a6ff);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    transition: all 0.3s;
    
    &:active {
      background: linear-gradient(90deg, #0c80f0, #1890ff);
      transform: translateY(2px);
      box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
    }
    
    &[disabled] {
      background: #a6d2ff;
      box-shadow: none;
    }
  }
}
</style>
